<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<script src="src/js/lib/rem.js"></script>
		<style>
			*{margin:0;padding:0;}
			/*.pay_process_con{width:100%;height:1.19rem;}*/
			.pay_process{
				height:2.99rem;
				width:5.26rem;
				position:absolute;
				top:20%;
				left:8%;
				background:#ffffff;
				padding-top:0.54rem;
				border-radius:0.1rem;
                z-index: 1;
			}
			/*支付宝中间层*/
			.wxSuccess_pay{
				height:0.9rem;
				width:6.1rem;
				font-size:0.24rem;
				background:#29adfc;
				display:block;
				text-align:center;
				margin:0 0.17rem;
				border-radius:0.05rem;
				color:#ffffff;
				line-height:0.9rem;
			}
			.wxSuccess_p_con p:nth-of-type(5){
				width:100%;
				height:0.51rem;
				line-height:0.51rem;
				text-indent: 2.18rem;
				font-size:0.26rem;
				color:#202020;
				/*font-weight:700;*/
			}
			.wxSuccess_p_con p:nth-of-type(4){
				width:100%;
				height:0.51rem;
				line-height:0.51rem;
				/*text-indent: 2.18rem;*/
				text-align:center;
				font-size:0.26rem;
				color:#202020;
			/*	font-weight:700;*/
			}
			.wxSuccess_p_con p:nth-of-type(3){
				width:100%;
				height:0.51rem;
				line-height:0.51rem;
				/*text-indent: 2.18rem;*/
				text-align:center;
				font-size:0.26rem;
				color:#202020;
				/*font-weight:700;*/
			}
			.wxSuccess_p_con p:nth-of-type(2){
				width:100%;
				height:0.47rem;
				line-height:0.47rem;
				text-align:center;
				font-size:0.26rem;
				color:#137df6;
				font-weight: 700;
				margin-bottom:0.23rem;
			}
			.wxSuccess_p_con p:nth-of-type(1){
				width:100%;
				height:0.47rem;
				line-height:0.47rem;
				text-align:center;
				font-size:0.26rem;
				color:#137df6;
				font-weight:700;
			}
			.wxSuccess_p_con{
				width:100%;
				height:2.97rem;
				margin-bottom:0.33rem;
			}
			/*订单编号*/
			.wxSuccess_top span{
				width:1.48rem;
				height:0.78rem;
				color:#ffffff;
				font-size:0.23rem;
				position:absolute;
				text-align:center;
				line-height:0.78rem;
				right:0;
				top:0;
			}
			.wxSuccess_top h2{
				width:100%;
				height:0.78rem;
				line-height:0.78rem;
				text-align:center;
				color:#ffffff;
				font-size:0.27rem;
				font-weight: normal;
			}
			.wxSuccess_top img{
				display:block;
				height:0.37rem;
				width:0.41rem;
				position:absolute;
				top:0.25rem;
				left:0.25rem;
			}
			.wxSuccess_top{
				width:100%;
				height:0.78rem;
				background:#29adfc;
				position:relative;
				margin-bottom:0.33rem;
			}
			/*.pay_process_con img{
				display:block;
				height:1.19rem;
				width:1.64rem;
				position:absolute;
				top:0;
				right:0;
			}*/
			.pay_process_p{
				width:5.36rem;
				height:0.92rem;
				margin-bottom:0.3rem;
			}
			.pay_process_p p:nth-of-type(1){
				width:5.36rem;
				height:0.45rem;
				text-align:center;
				line-height:0.45rem;
				font-size:0.22rem;
				color:#000000;
			}
			.pay_process_p p:nth-of-type(2){
				width:5.36rem;
				height:0.47rem;
				text-align:center;
				line-height:0.47rem;
				font-size:0.22rem;
				color:#000000;
			}
			.pay_process_1{
				width:auto;
				height:1.14rem;
				margin:0 auto;
				border-top:1px solid #d2d1cf;
				border-bottom:1px solid #d2d1cf;
				padding-top:0.3rem;
			}
			.pay_process_1 time{
				color:#ff9595;
				font-weight:700;
			}
			.pay_process_p time{
				color:#ff9595;
				font-weight:700;
			}
			.pay_process_1 p{
				width:5.36rem;
				height:0.4rem;
				line-height:0.4rem;
				text-align:center;
				font-size:0.23rem;
			}
			/*微信支付宝的样式*/
			.member_wx1 img{
				display:block;
				width:0.57rem;
				height:0.38rem;
				position:absolute;
				top:0.2rem;
				left:0;
			}
			.member_wx1 span{
				display:block;
				height:0.26rem;
				width:0.26rem;
				border-radius:50%;
				border:0.01rem solid #d2d1cf;
				position:absolute;
				right:0;
				top:0.24rem;
			}
			.member_wx1{
				width:6.06rem;
				height:0.8rem;
				border-top:0.01rem solid #d2d1cf;
				text-indent: 0.64rem;
				line-height:0.8rem;
				color:#3f3f3f;
				font-size:0.26rem;
				position:relative;
				margin:0 auto;
			}
			#zi_fu{
				width:0.57rem;
				height:0.41rem;
			}
			.bei_jing{
				height:100%;
				width:100%;
				background:#000000;
				opacity:0.5;
				position:absolute;
				top:0;
				left:0;
			}
			/*提示弹窗样式*/
			.model_w p:nth-of-type(2) span{
				flex:1;
				color:#0870d7;
				font-size:0.28rem;
				height:0.7rem;
				line-height:0.7rem;
				text-align:center;
			}
			.model_w p:nth-of-type(2) span:nth-of-type(1){
				border-right:0.01rem solid #137df6;
			}
			.model_w p:nth-of-type(2){
				height:0.7rem;
				width:4.62rem;
				border-top:0.01rem solid #d9d4cc;
				display:flex;
			}
			.model_w p:nth-of-type(1){
				height:0.3rem;
				line-height:0.3rem;
				text-align:center;
				color:#000000;
				font-size:0.2rem;
				margin-bottom: 0.25rem
			}
			.model_w h3{
				width:4.62rem;
				height:0.56rem;
				text-align:center;
				line-height:0.56rem;
				font-size:0.24rem;
				color:#000000;
				font-weight:normal;
			}
			.model_w{
				height:1.82rem;
				width:4.62rem;
				background:#ffffff;
				border-radius:0.1rem;
				position:fixed;
				top: 38%;
				left: 14%;
				z-index:2;
			}
		</style>
	</head>
	<body>
	<div>
		<div class="wxSuccess_top">
			<img src="src/image/house.jpg" alt="">
			<h2>已提交订单</h2>
			<span @click="getOrder_detail()">订单详情</span>
		</div>
		<div class="wxSuccess_p_con">
			<p>支付时间还剩:26分32秒</p>
			<p></p>
			<p>订单编号:<time>123456789</time></p>
			<p>订单金额:<time>￥89.7</time></p>
		</div>
		<div class="member_wx1">
			微信支付
			<img src="src/image/wx.jpg" alt="">
			<span></span>
		</div>

		<div class="member_wx1" style="margin-bottom:0.6rem;">
			支付宝支付
			<img src="src/image/zifu.jpg" alt="" id="zi_fu">
			<span></span>
		</div>
		<span class="wxSuccess_pay">立即支付</span>

		<div class="pay_process" style="display:none;">
			<!--<div class="pay_process_con" style="display:none;">
				<img src="src/image/arrow_2.jpg" alt="">
			</div>-->
			<div class="pay_process_p">
				<p>请在右上角箭头指向的<time>菜单</time>菜单中选择"<time>浏览器"打开</time></p>
				<p>在浏览器中完成支付</p>
			</div>
			<div class="pay_process_1">
                     <p>是否已经完成付款?</p>
				     <p>请确保支付完成后,点击<time>完成付款</time></p>
			</div>
		</div>
	</div>
	<!--背景弹窗-->
	<div class="bei_jing" style="display:none"></div>
	<!--提示弹窗-->
	<div class="model_w" style="display:none">
		<h3>提示</h3>
		<p>你的支付是否已经完成</p>
		<p><span>支付遇到问题</span><span>支付已经完成</span></p>
	</div>
	</body>
	<script src="src/js/lib/jquery-3.0.0.min.js"></script>
	<script>
		$(function(){
               $('.wxSuccess_pay').click(function(){
                  /* $(".pay_process").show();*/
                   $('.bei_jing').show();
                   $('.model_w').show();
			   });
            $('.bei_jing').click(function(){
                $(".pay_process").hide();
                $(this).hide();
                $('.model_w').hide();
			})
		})
	</script>

</html>
